<template>
    <div class="bi-people-quotas">
        <div class="bi-people-quotas__item is-small">
            <risk-people-quotas-symptom :data="data"></risk-people-quotas-symptom>
        </div>
        <div class="bi-people-quotas__item is-medium">
            <risk-people-quotas-love :data="data"></risk-people-quotas-love>
        </div>
        <div class="bi-people-quotas__item is-small">
            <risk-people-quotas-focus :data="data"></risk-people-quotas-focus>
        </div>
    </div>
</template>
<script>
import RiskPeopleQuotasSymptom from './risk-people-quotas-symptom'
import RiskPeopleQuotasLove from './risk-people-quotas-love'
import RiskPeopleQuotasFocus from './risk-people-quotas-focus'

export default {
    name: 'BiPeopleQuotas',
    components: {
        RiskPeopleQuotasSymptom,
        RiskPeopleQuotasLove,
        RiskPeopleQuotasFocus
    },
    props: {
        data: {
            type: Object,
            default: () => ({})
        }
    }
}
</script>
<style lang="scss">
.bi-people-quotas{
    display: flex;
    flex-direction: column;
}
.bi-people-quotas__item{
    padding: 10px;
    &.is-small{
        flex: 1;
    }
    &.is-medium{
        flex: 1.35;
    }
}
</style>